<template>
  <div class="home">
    <Header :menuItems="menuItems">
      <router-link
        :to="{ name: 'UPDATEIMG', params: { usid: $store.state.user.userId } }"
        class="home_headeraddcontent"
        slot="logo"
      >
        <i class="icon-camera"></i>
      </router-link>
      <span slot="title" class="home_header_title">{{
        $t('lang["' + $route.meta.title + '"]')
      }}</span>
      <router-link
        :to="{ name: 'SNS', params: { usid: $store.state.user.userId } }"
        class="home_headersns"
        slot="rightMenu"
        ><i class="icon-sub_account"></i
      ></router-link>
      <span slot="headermenu_0" slot-scope="{ item }" class="">{{
        item.title
      }}</span>
      <span slot="headermenu_1" slot-scope="{ item }">{{ item.title }}</span>
    </Header>
    <div class="home_main">
      <Panel></Panel>
    </div>
    <Footer></Footer>
    <FooterNav></FooterNav>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: "Home",
  components: {
    Header: () =>
      import(/* webpackChunkName: "header" */ "../components/header"),
    Footer: () =>
      import(/* webpackChunkName: "footer" */ "../components/footer"),
    FooterNav: () =>
      import(/* webpackChunkName: "footerNav" */ "../components/footerNav"),
    Panel: () =>
      import(/* webpackChunkName: "homeMain" */ "../components/home/homeMain"),
  },
  data() {
    return {
      isBack: false,
      defaultLogo: "",
      defaultAlt: "",
      menuItems: [
        {
          type: "lang",
          title: this.$t("lang.简体中文"),
          key: "zh-CN",
          name: "china",
        },
        {
          type: "lang",
          title: this.$t("lang.英文"),
          key: "en-US",
          name: "english",
        },
      ],
    };
  },
  mounted() {
    window.scrollTo(1, 1);
  },
  methods: {
    langSelectClickHandle(v) {
      console.log(v);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.home {
  padding: 0;
  margin: 0;
  .home_headeraddcontent {
    font-size: 24 / @base;
    padding: 10 / @base 5 / @base 5 / @base 15 / @base;
    display: block;
    text-align: left;
  }
  .home_headersns {
    font-size: 24 / @base;
    padding: 10 / @base 15 / @base 10 / @base 5 / @base;
    display: block;
    text-align: right;
  }
  .home_header_title {
    line-height: 45 / @base;
  }
  .home_main {
    margin: 45 / @base 0 0;
  }
}
</style>
